<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">{{ i18nt('designer.setting.uploadSetting') }}</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.uploadURL')">
      <el-input type="text" v-model="localOptionModel.uploadURL" />
    </el-form-item>
  </div>
</template>

<script>
import i18n from '@/utils/i18n'
import { reactive, toRefs } from 'vue'
export default {
  name: 'UploadURLEditor',
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  data() {
    return {
      // Create a local copy of the prop to use with v-model
      localOptionModel: this.optionModel
    }
  },
  watch: {
    // Watch for changes in the local model and emit an event to update the parent component
    localOptionModel(newValue) {
      this.$emit('update:optionModel', this.localOptionModel)
    },

    // Also make sure to update the local model if the prop changes externally
    optionModel(newVal) {
      this.localOptionModel = newVal
    }
  }
}
</script>

<style scoped></style>
